<template>
  <div class="select-tree">
    <treeselect v-if="!showCount" :options="options" :placeholder="placeholder" v-model="value"/>

    <treeselect v-else :options="options" :placeholder="placeholder" v-model="value" :show-count="true">
      <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
        {{ node.label }} <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
      </label>
    </treeselect>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'

export default {
  name: 'my-select-tree',
  components: {
    Treeselect
  },
  props: {
    value: {
      default: null
    },
    options: {
      type: Array,
      required: true
    },
    showCount: {
      type: Boolean
    },
    placeholder: {
      type: String
    },
    props: {
      type: Object
    }
  },
  created() {
    let data = this.options
    for (var i in data) {
      console.log(i, '测试', data)
    }
    console.log(this.props)
  },
  methods: {
  }
}
</script>

<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>
